<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            position: relative;
        }
       .title{
        display: flex;
        justify-content: space-between;
        height: 50px;
        align-items: center;
        padding:  0px 20px;
       }
       .item{
        display: flex;
        justify-content: space-between;
        padding:  0px 20px;
       }
       .item img{
        width: 100px;
        height: 100px;
       }
       .item .name{
        margin-bottom: 47px;
       }
       .item .right{
        display: flex;
        width: 50x;
        align-items: flex-end;
       }
       .item .right div{
      width: 20px;
      height: 20px;
      background-color: #00D6FF;
      color: red;
      text-align: center;
       }
       .item .middle{
        width: 155px;
       }
       .bottom{
        position: absolute;
        bottom: 0%;
        color: white;
        background-color: #474747;
        height: 50px;
        font-size: 12px;
        display: flex;
        align-items: center;
       }
       .bottom img{
        width: 50px;
        height: 50px;
       }
       .bottom p{
        width: 93px;
       }
       .bottom div{
        margin-top: 10px;
        height: 100%;
        width: 200px;
       }
       .bottom button{
        width: 100px;
        height: 40px;
       background-color: #00FF26;
       color: white;
       }
    </style>
</head>

<body>
    <!-- 由于Vue的实例挂载在id为app的DOM节点上,所以Vue实例对象上的数据和方法就可以在
    挂载的DOM节点上使用 -->
    <div id="app">
        <div class="title">
            <p>已选商品</p>
            <p @click="clear">清空</p>
        </div>
        <div class="list">
            <!-- 用data中的数据,渲染出多个任务,最终形成列表 -->
            <!-- 列表渲染,使用Vuejs的指令  v-for,也可以配合key属性一起使用 -->
            <!-- 列表渲染基本语法: v-for="(item,index) in datalist" key="index" -->
            <div class="item" v-for="(item,index) in datalist" v-bind:key="index">
                <div class="left">
                    <!-- 当属性值中需要计算或放置变量时,属性名称前必须有v-bind: -->
                    <img v-bind:src="item.pic" alt="">
                </div>
                <div class="middle">
                    <!-- {{ 表达式 或者 变量 }}插值表达式(双大括号)会解析/计算表达式的值,只能用在标签内容区 -->
                    <div class="name">{{item.name}}</div>
                    <div class="pirce">￥{{item.pirce}}.00</div>
                </div>
                <div class="right">
                 <div @click="jian(item)">-</div>
                 <p>{{item.count}}</p>
                 <div @click="zeng(item)" >+</div>
                </div>
                <div class="bottom">
                    <img src="https://img0.baidu.com/it/u=1432218445,884369207&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
                   <div>
                    <span>{{zongjia}}元</span>
                    <span >总数{{zongshu}}个</span>
                    <p>另需配送费35元</p>
                   </div>
                    <button>去结算</button>
            </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el: '#app', //Vue挂载的节点
        data: {
            datalist: [
                { id: 1, pic:'https://img2.baidu.com/it/u=787603367,2813110903&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', name: '秋刀鱼/斤', pirce: 35.00 ,count:1},
                { id: 2, pic:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2Fe850352ac65c10388f2b8500b5119313b17e899f&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672229774&t=24a4cd1ff1e1a029a6e17a5d3b93296d',name: '鲜大带鱼/条', pirce:  45.00  ,count:1},
                { id: 3,pic:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F16%2F10%2F22%2F991e5138fd18fbb7eb69137469293e06.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672229774&t=a68ae165874eeb71ca9c6f4e64f2d7c0', name: '鲜活皮皮虾/斤',  pirce:  85.00  ,count:1},
                { id: 4, pic:'https://img2.baidu.com/it/u=449864280,3784261880&fm=253&fmt=auto&app=138&f=PNG?w=797&h=500', name: '13-15头鲍鱼/斤',  pirce:  44.00 ,count:1},
            ]
        },   //定义的响应式数据,data可以是一个对象也可以是一个函数
        //data：function(){return {}}
        computed: {
            zongjia(){
                return this.datalist.reduce((sum,item)=>{
                        return sum += (item.count)*(item.pirce)
                    },0)
            },
            zongshu(){
                return this.datalist.reduce((sum,item)=>{
                    return sum+=item.count
                },0)
            }
        },//定义计算属性
        watch: {},   //定义数据监听
        methods: {
            zeng(item){
                 if(item.count<5){
                    item.count++
                    console.log(item);
                    zongjia=item.count*item.pirce
                    zongshu=item.count
                    console.log(item.count,item.pirce);
                 }
                },
            jian(item){
                if(item.count>1){
                    item.count--
                    zongjia=item.count*item.pirce
                 }
            },
            clear(){
                this.datalist=[]
            }
        }, //定义方法(函数)
        filters: {}, //定义过滤器
        directives: {},//定义自定义指令
        components: {},//注册局部组件
    })
</script>